<template>
	<view class="container">
		<view>
			<uni-card style="" title="" extra="">

				<view class=" " style="position: relative;">
					<button size="mini" :disabled="false" @click="jumpto('/pages/account/create')"
						style="position: absolute;right: 0; color: #808080">修改资料</button>
					<view class="block-content" style="display: flex;">
						<view style="flex: 1" class="profile-avatar">
							<image :src="user.avatar == '' ? '/static/default_avatar.png' : user.avatar" />
						</view>
						<view style="flex: 3;">
							<view class="profile-detail">
								<view class="profile-name">
									{{user.username == '' ? '未设置' : user.username}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</uni-card>
			
			<!-- <navigator url="/pages/center/vip">
				<view style="padding: 10px;text-align: right;">查看更多</view>
			</navigator> -->

			<uni-card style="padding: 10px 0;" title="" extra="">
				<view class="block">
					<view class="block-content">
						<view class="profile-detail">
							<view
								style="text-align: center;font-size: 18px;font-weight: bold;color: #18BC37;margin-bottom: 10px">
								{{user.validity_day}}</view>
							<view class="profile-phone" style="font-size: 11px;">
								账户有效期/天
							</view>
						</view>

						<view class="profile-detail">
							<view
								style="text-align: center;font-size: 18px;font-weight: bold;color: #18BC37;margin-bottom: 10px">
								1</view>

							<view class="profile-phone" style="font-size: 11px;">
								授权子账户/个
							</view>
						</view>

						<view class="profile-detail">
							<view
								style="text-align: center;font-size: 18px;font-weight: bold;color: #18BC37;margin-bottom: 10px; white-space: nowrap;">
								{{is_open}}
							</view>

							<view class="profile-phone" style="font-size: 11px;">
								门禁权限
							</view>
						</view>
					</view>
				</view>
			</uni-card>

			<uni-card style="" title="" extra="">
				<view class="block methods">
					<view class="block-content">

						<!-- <view class="method" @click="jumpto('/pages/security/index')">
							<view class="method-image">
								<image style="width: 23px; height: 23px;" mode="widthFix" src="../../static/6.png" />
							</view>
							<view class="update-image" style="font-size: 12px;">
								账户安全
							</view>
						</view> -->
				
						<view class="method" @click="jumpto('/pages/center/vip')">
							<view class="method-image">
								<image style="width: 25px; height: 25px;" mode="widthFix" src="../../static/8.png" />
							</view>
							<view class="update-image" style="font-size: 12px;">钱包卡券</view>
						</view>


						<view class="method" @click="jumpto('/pages/guard/index')">
							<view class="method-image">
								<image style="width: 21px; height: 21px;" mode="widthFix" src="../../static/4.png" />
							</view>
							<view class="update-image" style="font-size: 12px;">
								门禁管理
							</view>
						</view>


						<view class="method">
							<view class="method-image">
								<image style="width: 25px; height: 25px;" mode="widthFix" src="../../static/1.png" />
							</view>
							<view class="update-image" style="font-size: 12px;">
								消息通知</view>
						</view>

						<view class="method" @click="showmo()">
							<view class="method-image">
								<image style="width: 25px; height: 25px;" mode="widthFix" src="../../static/2.png" />
							</view>
							<view class="update-image" style="font-size: 12px;">
								在线客服</view>
						</view>


						<view class="method">
							<navigator url="/pages/attestation/create">
								<view class="method-image">
									<image style="width: 25px; height: 25px;" mode="widthFix"
										src="../../static/5.png" />
								</view>
								<view class="update-image" style="font-size: 12px;">
									意见反馈</view>
							</navigator>
						</view>


						<!-- <view class="method">
							<view class="method-image">
								<image style="width: 25px; height: 25px;" mode="widthFix" src="../../static/7.png" />
							</view>
							<view class="update-image" style="font-size: 12px;">
								关于我们</view>
						</view> -->

						<view class="method">
							<view class="method-image">
								<image style="width: 25px; height: 25px;" mode="widthFix" src="../../static/3.png" />
							</view>
							<view class="update-image" style="font-size: 12px;">
								待建设中</view>
						</view>
					</view>
				</view>
			</uni-card>


			<view class="block" style="margin: 10px;">
				<button style="margin: 20px 10px; padding: 5px 0; font-size: 12px;" type="primary"
					@click="logout">退出登录</button><!-- 这种写法只有h5平台支持，不跨端，不推荐使用 -->
			</view>

			<!--            <view class="button ">-->
			<!--                注销账号-->
			<!--            </view>-->

		</view>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex';

	export default {
		data() {
			return {
				user: {
					avatar: '',
					username: '',
					is_open: '',
					sub_account_num: 0,
					validity_day: 0,
				},
			}
		},
		computed: {
			// authToken: false,
			// ...mapState(['authToken', 'user'])
		},
		onLoad() {
			this.user.avatar = uni.getStorageSync('avatar', '');
			this.user.username = uni.getStorageSync('username', '');

			let status = uni.getStorageSync('status', 0);
			if (status == 1) {
				this.is_open = '已开通';
			} else {
				this.is_open = '未开通';
			}
			
			let validity_day = uni.getStorageSync('validity_day', 0);
			this.user.validity_day = validity_day;

			this.getSubUser();
		},
		methods: {
			getSubUser() {
				let that = this;
				let uid = uni.getStorageSync('uid');

				this.$api.getSubUser({
					uid: uid
				}).then(res => {
					that.sub_account_num = res.data.length;
				})
			},
			logout() {
				let that = this;
				uni.showModal({
					title: '是否退出',
					success: function(res) {
						if (res.confirm) {
							// uni.removeStorageSync('selected_baby');
							// uni.removeStorageSync('uid');
							// uni.removeStorageSync('is_login');
							uni.clearStorageSync();
							uni.redirectTo({
								url: '/pages/user/signin',
							})
							// that.$Router.push({name: '登录'});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			jumpto(url) {
				// this.$Router.push({
				// 	name: url
				// });
				uni.navigateTo({
					url: url
				})
			},
			showmo() {
				uni.showModal({
					title: '客服热线电话',
					content: '123353325523',
					success: function(res) {
						console.log('立即拨号')
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.update-image {
		display: inline;
		background: none;
		text-align: left !important;
	}

	.update-image:after {
		border: none !important;
		position: relative !important;
	}

	.page {
		background: rgb(242, 242, 242);
	}

	.container {
		height: inherit;
	}

	.block {
		// margin: 15px;
		background: #fff;
		border-radius: 5px;


		.block-title {
			font-size: 18px;
			padding: 15px;
			font-weight: bold;

			.block-sub-title {
				font-size: 16px;
				font-weight: normal;
				float: right;
				color: rgb(153, 153, 153);
			}

		}

		.block-desc {
			color: rgb(153, 153, 153);
			padding: 0 15px;
			border-bottom: 1px solid rgb(153, 153, 153);
			margin: 0 15px;

		}

		.block-content {
			// padding: 15px 0 15px 15px;
			display: flex;
			align-items: center;


			&>span {
				min-width: 15%;
				height: 36px;
				margin-right: 15px;
				line-height: 36px;
			}

			&>view,
			&>uni-switch {
				//margin-left: auto;
			}

			/deep/ {
				.checklist-group {
					justify-content: center;
				}
			}

			&>.character-avatar {
				margin-left: 0;
				margin-right: 5px;

				&>image {
					height: rpx(150);
					width: rpx(150);


					.character-image {
						height: rpx(160);
						width: rpx(160);

						border-radius: 50%;

					}

					border-radius: 10px;
				}
			}
		}
	}

	.profile-avatar,
	.profile-avatar image {
		height: 85px;
		width: 85px;
		border-radius: 50%;
	}

	.method {
		padding-top: 15px;
	}

	.method-image {
		text-align: center;
		margin-bottom: 10px
	}

	.method-image image {
		height: 50px;
		width: 50px;
	}


	.profile-detail {
		flex: 1;
		padding: 0 20px;
		display: flex;
		flex-direction: column;
	}

	.profile-phone {
		// margin-top: 10px;
		text-align: center;
		white-space: nowrap;
	}

	.block.methods .block-content {
		display: block;
	}

	.method {
		display: inline-block;
		text-align: center;
		width: 25%;
		margin-bottom: 15px;
		color: rgb(96, 96, 96)
	}

	.button {
		color: #fff;
		padding: 10px;
		border-radius: 10px;
		margin-left: 10px;
		margin-right: 10px;
		text-align: center;
	}

	.button.logout {
		background: #007AFF;
		font-size: 12px;
	}
</style>
